css实现强制不换行、自动换行、强制换行、超出2行省略号以及word |
您所在的位置：网站首页 › css3 自动换行 › css实现强制不换行、自动换行、强制换行、超出2行省略号以及word |
css实现强制不换行、自动换行、强制换行、超出2行省略号以及word
|
css实现强制不换行、自动换行、强制换行、超出2行省略号以及word-wrap: break-word和word-break: break-all的区别
原创
wx6409a261df68a 2023-03-15 09:37:30 博主文章分类：css ©著作权 文章标签 强制不换行 自动换行 强制换行 超出2行省略号 文章分类 HarmonyOS 后端开发 ©著作权归作者所有：来自51CTO博客作者wx6409a261df68a的原创作品，请联系作者获取转载授权，否则将追究法律责任 1. 强制不换行，并且多行文字溢出显示省略号.ellips{/*超出省略号*/ white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}.ellips_line2,.ellips_line3{/*chrome下的私有属性*/ display:-webkit-box; -webkit-box-orient:vertical; overflow:hidden;} .ellips_line2{/*显示两行，超出的用省略号显示*/ -webkit-line-clamp:2;} .ellips_line3{ /*显示三行，超出的用省略号显示*/ -webkit-line-clamp:3;}2. 自动换行div{ word-wrap: break-word; /*只对英文起作用，以单词作为换行依据。*/ word-break: normal; }3. 强制英文单词断行div{ word-break:break-all; /*只对英文起作用，以字母作为换行依据。*/ }4. word-wrap: break-word和word-break: break-all的区别word-wrap: break-word; 比较温柔，会先另起一行，新的行放不到再把单词断了。如下图
word-break: break-all; 这娃比较暴力，他不会去新起一行，而是直接在后面跟着，如果放不下，则会强制把单词折断。如下图
上一篇：在vsCode中用git命令合并分支 下一篇：npm install --save 、--save-dev 、-D、-S 的区别与NODE_ENV的配置 |
【本文地址】
今日新闻 |
推荐新闻 |